HTML Links

    Links are the clickable text that can lead you to a specific point on the same page or another page.

    Hyperlinks

    HTML links are also known as hyper or anchor link. Links are generally used to jump to a specific point on the same or another page. When you hover the move over the link the mouse icon change from default to a clickable hand. Images and glyph icons can also be used as a link.

    HTML Links

    To create a link we use <a> element which stands for the anchor tag. Syntax: 

    <a href="URL"> Text</a>
    It is mandatory to mention the href attribute, because it specifies the URL or destination of the link.

    Example 

    <a href="https://www.techgeekbuzz.com"> TechGeekBuzz </a>
<a href="https://www.google.com"> Google </a>

    Output

    TechGeekBuzz Google

    Link Target Attribute

    The target attribute specifies how the link will be opened on the browser when the user clicks on it. There are four values associated with the target attribute.

    • _self : It is the default target value, and this opens the target URL on the same tab and window.
    • _blank : It opens the link URL at the same window and new tab.
    • _parent : It opens the Link URL in the parent frame.
    • _top : It opens the link URL in the full body of the window.

    Example 

    <a href="https://www.techgeekbuzz.com/" target="_blank">
TechGeekBuzz</a>

    Output

    TechGeekBuzz

    Image Links

    An image could also be used as a link.

    Example 

    <a href="https://www.techgeekbuzz.com/">
     <img src="image.jpg" 
     style="width:30px;
     height:30px;">
</a>

    It is essential to resize your image using the CSS property when you use the image a Link.

    Button Links

    In HTML 5 we have an element called <button>, which is used to create buttons on the web page. Buttons are also be used to present links.

    Example 

    <a href="https://www.techgeekbuzz.com/" target="_blank">
    <button>TechGeekBuzz</button>
</a>

    Output

    TechGeekBuzz

    Link Title attribute

    We use the title attribute to provide additional information about the link. The user can see the information by hovering the mouse over the link.

    Example 

    <a href="https://www.techgeekbuzz.com/" 
title="This Will lead you to techgeekbuzz official home page">
    Techgeekbuzz
</a>

    Output

    Techgeekbuzz

    Link to the Same Page

    <a> element can also be used to point to a section of the same web page. This technique often uses when the page contains too much content, and we want to provide some link that could take the user directly to a specific section of the page.

    Syntax 

    <a href="#id name"> Link Name</a>
<p id ="Id Name"> content</p>

    Example 

    <a href="#hyperlinks">
    Hyperlinks
</a>
<p id="hyperlinks"> This is the content about hyperlinks</p>

    Summary

    • Links are the clickable elements that can lead to a specific URL or location.
    • In HTML links can be created using <a> anchor tag.
    • href attribute contains the destination URL or location.
    • title attribute provides additional information about the link.
    • <a> tag can also be used to jump to a specific location on the same web page.
    Previous Tutorial Next Tutorial